<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>差假管理</el-breadcrumb-item>
        <el-breadcrumb-item>申请请假</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <hr style="border: 1px solid #F2F6FC;">
    <div class="leave">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="日期">
          <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="部门"  v-show="this.roleId === 2">
          <el-select v-model="departId">
            <el-option label=" " value=" "></el-option>
            <el-option v-for="item in departList" :key="item.departId" :label="item.departName" :value="item.departId">{{
              item.departName }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="pass">
            <el-option label="未通过" :value="0">未通过</el-option>
            <el-option label="审批中" :value="1">审批中</el-option>
            <el-option label="通过" :value="2">通过</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchUser(date, pass, departId)">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addLeave">提交申请</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="leaveId" label="序号">
        </el-table-column>
        <el-table-column prop="userId" label="申请人">
        </el-table-column>
        <el-table-column prop="submitTime" label="提交时间">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleView(scope.row)" type="text" size="small">详情</el-button>
            <el-button @click="deleteLeave(scope.row.leaveId)" type="text" size="small">撤销申请</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
        :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-drawer :visible.sync="describleshow" direction="ttb" size="50%" :before-close="handleClose"
      :modal-append-to-body="false">
      <el-descriptions title="请假信息" border v-if="describle.length">
        <el-descriptions-item label="请假单编号">{{ this.describle[0] }}</el-descriptions-item>
        <el-descriptions-item label="员工id">{{ this.describle[1] }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ this.describle[2] }}</el-descriptions-item>
        <el-descriptions-item label="请假理由">{{ this.describle[3] }}</el-descriptions-item>
        <el-descriptions-item label="审核信息">{{ this.describle[4] }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ this.describle[5] }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ this.describle[6] }}</el-descriptions-item>
        <el-descriptions-item label="提交时间">{{ this.describle[7] }}</el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script>
import { getRoleById, getLeaveList, getDepartList, deleteLeave } from '@/api/api'
export default {
  data () {
    return {
      tableData: [],
      pageNumber: 1,
      pageSize: 5,
      total: 0,
      departList: [],
      departId: null,
      pass: null,
      roleId: null,
      date: '',
      startTime: '',
      endTime: '',
      describle: [],
      describleshow: false
    }
  },
  methods: {
    searchUser (date, pass, departId) {
      const startTime = date[0]
      const endTime = date[1]
      console.log(date)
      const params = {
        userId: null,
        departId: departId,
        pass: pass,
        startTime: startTime,
        endTime: endTime,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      getLeaveList(params).then(res => {
        // console.log(res.data)
        this.tableData = res.data.data.list
      })
    },
    addLeave () {
      this.$router.push('/lb/addLeave')
    },
    handleView (row) {
      this.describle = []
      console.log(row)
      this.describle.push(row.leaveId)
      this.describle.push(row.userId)
      this.describle.push(row.pass)
      this.describle.push(row.reason)
      this.describle.push(row.comments)
      this.describle.push(row.startTime)
      this.describle.push(row.endTime)
      this.describle.push(row.submitTime)
      // console.log(this.describle)
      this.describleshow = true
    },
    deleteLeave (leaveId) {
      deleteLeave(leaveId).then(res => {
        // console.log(res.data)
        this.$router.go()
      })
    },
    SearchDepart () {
      getDepartList().then(res => {
        // console.log(res.data)
        this.departList = res.data.data
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.serchUser()
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      this.serchUser()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  },
  mounted () {
    getRoleById().then(res => {
      console.log(res.data)
      this.roleId = res.data.data.roleId
    })
    this.searchUser(this.date, this.pass, this.departId)
    this.SearchDepart()
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb {
  margin: 0px 0px 20px 0px;
}

.leave {
  margin: 20px 0px 0px 0px;
}
</style>
